<template>
	<view class="allCar" :class="{'scroll-stop':carInfosStatus}">
		<view class="header-search">
			<view class="search">
				<view class="search-icon"><image src="../../static/assets/index/icon-serch.png"></image></view>
				<input @confirm="confirm" confirm-type="search" v-model="searchVal" type="text" placeholder="输入车辆的名称或品牌" />
			</view>
		</view>
		<!-- <view :id="index" class="scroll-view-item" v-for="(item,index) in scrollBrand" :key="index">
			<view class="letter-title">{{index}}</view>
			<view class="letter-record" v-for="(list, cindex) in item" @click="toBrand(list.id,list.name)" :data-id="list.id"
			 :data-name="list.name">
				<view class="letter-img">
					<image mode="aspectFit" lazy-load="true" class="icon-logo-list" :src="list.logo_image"></image>
				</view>
				<view class="letter-name">{{list.name}}</view>
			</view>
		</view>
		<view class="navigation-bars">
			<view class="navigation-bars-initial " :class="letterActive==item?'active':''" v-for="(item,index) in initial" :key="index"
			 @click="goToNode(item)">
				{{item}}
			</view>
		</view> -->

		<u-index-list :scrollTop="scrollTop" :index-list="indexList" :activeColor="'#E41805'">
			<view class="scroll-view-item" v-for="(item, index) in scrollBrand" :key="index">
				<u-index-anchor :index="index" />
				<view
					class="letter-record u-border-bottom"
					v-for="(list, cindex) in item"
					@click="toBrand(list.id, list.name)"
					:data-id="list.id"
					:data-name="list.name"
					:key="cindex"
				>
					<view class="letter-img"><image mode="aspectFit" lazy-load="true" class="icon-logo-list" :src="list.logo_image"></image></view>
					<view class="letter-name">{{ list.name }}</view>
				</view>
			</view>
		</u-index-list>

		<view class="dialog" v-if="carnameListStatus" @click="close">
			<scroll-view class="dialogBox" scroll-y lower-threshold="10" @scrolltolower="changePage">
				<view class="title">{{ title }}</view>
				<view class="content">
					<view class="item" @tap.stop="getCarInfos(item)" v-for="(item, index) in carnameList" :key="index">
						<image :src="item.image" mode="aspectFill"></image>
						<view class="info">
							<view class="name">{{ item.name }}</view>
							<view class="money">{{ item.price_range }}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<view class="dialogBox1" v-if="carInfosStatus">
			<Tabs :TabList="catTypelist" :currentTab="activeCarTypeIndex" @tabs="handleTabChange" :lineWidth="160">
				<TabPane v-for="index in catTypelist.length" :key="index">
					<view class="content">
						<view class="item" @click="pageback(item)" v-for="(item, index) in carInfosList[catTypelist[activeCarTypeIndex].year]" :key="index">
							<view class="info">
								<view class="name">{{ item.full_name }}</view>
								<view class="money">{{ item.minprice }}</view>
							</view>
						</view>
					</view>
				</TabPane>
			</Tabs>
		</view>
	</view>
</template>

<script>
import Tabs from '@/pages/components/public/tabs.vue'
import TabPane from '@/pages/components/public/tabPane.vue'
import { index, brandsList, getvehicle, getCarInfos } from '../../apis/used-car/api.js';
export default {
	data() {
		return {
			searchVal: '',
			scrollBrand: [],
			initial: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'], //字母导航
			letterActive: '',
			page: 1,
			title: '一汽大众',
			carnameListStatus: false,
			carInfosStatus: false,
			carnameList: [],
			lastPage: false,
			carInfosList: [],
			catTypelist: [],
			activeCarTypeIndex:0,
			brand_id: '',
			indexList: [],
			scrollTop: 0
		};
	},
	components:{
		Tabs,
		TabPane
	},
	onLoad() {
		this.brand();
	},

	methods: {
		handleTabChange(index){
			this.activeCarTypeIndex = index
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		changePage: function() {
			console.log('上啦加载');
			this.page = this.page + 1;
			this.getLIistData();
		},
		/**
		 * 去到对应的节点
		 */
		goToNode(val) {
			let that = this;
			var hash = val;
			that.toView = hash;
			that.letterActive = hash;
		},
		/* 获取车系列表*/
		brand() {
			brandsList()
				.then(res => {
					this.scrollBrand = res.data.brands;
					console.log(this.scrollBrand)
					this.indexList = Object.keys(res.data.brands) || [];
				})
				.catch(err => {
					uni.showToast({
						title: err,
						icon: 'none'
					});
				});
		},
		close() {
			this.carnameListStatus = false;
		},
		toBrand(id, name) {
			this.page = 1;
			this.carnameListStatus = true;
			this.carnameList = []
			// let that = this;
			this.brand_id = id;
			this.lastPage = false;
			this.getLIistData();
			// getvehicle({
			// 	brand_id: id,
			// 	p: this.page,
			// }).then(res => {
			// 	that.carnameList = res.data.page_list
			// 	that.title = res.data.brand;
			// })
		},
		getLIistData: function() {
			let that = this;
			if (that.lastPage) {
				uni.showToast({
					title: '没有数据了'
				});
				return;
			}

			// this.carnameListStatus = true;
			// let that = this;
			// that.brand_id = this.;
			getvehicle({
				brand_id: that.brand_id,
				p: that.page
			}).then(res => {
				that.carnameList = [...that.carnameList, ...res.data.page_list];
				that.title = res.data.brand;
				if (res.data.page_list.length == 0) {
					that.lastPage = true;
				}
			});
		},
		getCarInfos(item) {
			let that = this;
			this.carInfosStatus = true;
			getCarInfos({
				v_id: item.id
			}).then(res => {
				that.catTypelist = res.data.car_type.map(item=>({year:item,title:`${item} 款`}))
				that.carInfosList = res.data.list;
			});
		},
		pageback(item) {
			uni.$emit('intent-change',item)
			let that = this;
			let pages = getCurrentPages(); // 当前页面
			let prePage = pages[pages.length - 2]; // 前一个页面
			prePage.setData({
				//把需要回传的值保存到上一个页面
				id: item.id,
				brand_id: that.brand_id,
				name: item.full_name
			});
			uni.navigateBack({
				delta: 1
			});
			
		}
	}
};
</script>

<style lang="less">
.scroll-stop{
	height: 100vh;
	overflow: hidden;
}
.allCar {
	.dialogBox1 {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #fff;
		overflow: auto;
		z-index: 333;
		.title {
			padding: 30rpx;
			overflow-x: auto;
			text {
				padding: 5rpx 15rpx;
				margin: 20rpx;
				color: #2e2e2e;
				font-size: 30rpx;

				&.active {
					color: #fff;
					background-color: #e41805;
				}
			}
		}
		.content {
			.item {
				// margin-top: 30rpx;
				padding-bottom: 30rpx;
				margin: 30rpx;
				border-bottom: 1rpx solid #ccc;
				.info {
					.name {
						font-size: 26rpx;
						font-weight: bold;
						margin-bottom: 12rpx;
					}
					.money {
						font-size: 26rpx;
						color: #e41805;
					}
				}
			}
		}
	}

	.dialog {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 999;

		.dialogBox {
			width: 80%;
			height: 100%;
			background-color: #fff;
			position: absolute;
			right: 0;
			overflow: auto;

			.title {
				text-align: center;
				margin-top: 60rpx;
				font-size: 36rpx;
				font-weight: bold;
				margin: 40rpx 0;
				color: #333;
			}

			.content {
				height: calc(100% - 100rpx);
				.item {
					// margin-top: 30rpx;
					padding-bottom: 30rpx;
					border-bottom: 1rpx solid rgba(204, 204, 204, 0.5);
					margin: 30rpx;
					&::after {
						content: '';
						display: block;
						height: 0;
						overflow: hidden;
						clear: both;
					}
					image {
						width: 200rpx;
						height: 90rpx;
						// margin-left: 20rpx;
					}

					.info {
						width: calc(100% - 260rpx);
						float: right;

						.name {
							font-size: 26rpx;
						}

						.money {
							font-size: 26rpx;
							color: #e41805;
						}
					}
				}
			}
		}
	}

	.navigation-bars {
		z-index: 2;
		position: fixed;
		top: 210rpx;
		right: 6rpx;
		width: 30rpx;

		.navigation-bars-initial {
			display: flex;
			width: 30rpx;
			height: 30rpx;
			-webkit-box-pack: center;
			-webkit-justify-content: center;
			justify-content: center;
			-webkit-box-align: center;
			-webkit-align-items: center;
			align-items: center;
			color: #999;
			margin: 12rpx auto;
			font-size: 24rpx;
			border-radius: 50%;
		}
	}

	.header-search {
		height: 88rpx;
		position: relative;
		padding: 0 29rpx;
		display: flex;
		align-items: flex-end;
		justify-items: center;
		z-index: 99;
		margin-bottom: 20rpx;

		.search {
			flex: 1;
			width: 100%;
			height: 56rpx;
			background: rgb(248, 248, 248);
			font-size: 32rpx;
			display: flex;
			border-radius: 40rpx;
			border: 1rpx solid #eee;
			align-items: center;
			color: #afafaf;

			.search-icon {
				display: block;
				width: 56rpx;

				image {
					width: 30rpx;
					height: 30rpx;
					margin: 18rpx 16rpx 16rpx 25rpx;
				}
			}

			input {
				display: inline-block;
				height: 64rpx;
				width: 88%;
				padding-left: 16rpx;
				background: transparent;
				outline: none;
				vertical-align: middle;
				font-size: 24rpx;
			}
		}
	}

	.navigation-bars {
		z-index: 2;
		position: fixed;
		top: 210rpx;
		right: 6rpx;
		width: 30rpx;

		.navigation-bars-initial {
			display: flex;
			width: 30rpx;
			height: 30rpx;
			-webkit-box-pack: center;
			-webkit-justify-content: center;
			justify-content: center;
			-webkit-box-align: center;
			-webkit-align-items: center;
			align-items: center;
			color: #999;
			margin: 12rpx auto;
			font-size: 24rpx;
			border-radius: 50%;

			&.active {
				background: #e41805;
				color: #fff;
			}
		}
	}

	.letter-scroll {
		position: relative;
		height: 100vh;
		overflow: hidden;
	}

	.scroll-view-item {
		height: auto;
	}

	.letter-title {
		background: #f8f8f8;
		color: #969696;
		font-size: 20rpx;
		padding-left: 30rpx;
		margin-bottom: 40rpx;
	}

	.letter-record {
		display: flex;
		height: 65rpx;
		align-items: center;
		padding: 20rpx 0;
	}

	.letter-img {
		margin: 0 50rpx 0 20rpx;
		width: 95rpx;
		height: 65rpx;
		text-align: center;
	}

	.letter-img image {
		width: 100%;
		height: 100%;
	}

	.icon-logo-list {
		width: 96px;
		height: 66rpx;
	}

	.letter-name {
		font-size: 28rpx;
		color: #333;
	}
}
</style>
